<!DOCTYPE HTML>
<html>


	<include file="frontend_page/home/blog/blog_header"/>
	<style>
		.gallery{
			width: 100%;
			max-width: 1200px;
			margin: 2rem auto;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
		}

		.gallery-item{
			box-shadow: 2px 2px 8px -1px #3498DB;
			width: 240px;
			height: 300px;
			margin: 10px;
			background: #000;
			position: relative;
			cursor: pointer;
			overflow: hidden;
		}

		.gallery-item-image{
			position: absolute;
			width: 100%;
			height: 100%;
			background: lightblue;
			z-index:20;
			-webkit-transition:all .5s ease;
			transition: all .5s ease;
			bottom:0;
			overflow: hidden;
		}

		.gallery-item:hover .gallery-item-image{
			bottom: 300px;
		}

		.gallery-item-description{
			color:white;
			font-size: .8rem;
			width: 100%;
			height: 300px;
			padding: .5rem .8rem;
			background: #3498DB;
			position: absolute;
			bottom:0;
		}
		.jiaobiao {
			background-color: #333;
			color: #fff;
			position: relative;
		}
		.jiaobiao:after {
			content: attr(data-msg);
			text-align: center;
			width: 50px;
			height: 20px;
			border-radius: 20%;
			background-color: #00ced1;
			position: absolute;
			top: 1px;
			right: 1px;
			backface-visibility: hidden;
		}
		.count_jiaobiao {
			background-color: #333;
			color: #fff;
			position: relative;
		}
		.count_jiaobiao:after {
			content: attr(data-count);
			text-align: center;
			width: auto;
			height: auto;
			border-radius: 5%;
			background-color: #ff4500;
			position: absolute;
			top: 25px;
			right: 1px;
			backface-visibility: hidden;
			padding: 2px;
		}
		.tag_jiaobiao {
			background-color: #333;
			color: #fff;
			position: relative;
		}
		.tag_jiaobiao:after {
			content: attr(data-tag);
			text-align: center;
			width: auto;
			height: 22px;
			border-radius: 5%;
			background-color: #ff5722;
			position: absolute;
			bottom: 1px;
			right: 1px;
			padding: 1px;
			backface-visibility: hidden;
		}
		.title_jiaobiao {
			background-color: #333;
			color: #fff;
			position: relative;
		}
		.title_jiaobiao:after {
			content: attr(data-title);
			text-align: center;
			width: 20px;
			height: auto;
			border-radius: 5%;
			background-color: #1e9fff;
			position: absolute;
			top: 2px;
			left: 5px;
			padding: 2px;
			backface-visibility: hidden;
		}
	</style>
	<body class="homepage">

	<include file="frontend_page/home/blog/blog_nav"/>

	<!-- Main -->
		<div id="main-wrapper">

			<div class="container">
				<div id="main">
	
					<div class="row">

						<!-- Content -->
							<div id="content" class="12u skel-cell-important">
								<section>
									<header>
										<h2>浣溪沙</h2>
										<span class="byline">枕上诗书闲处好，门前风景雨来佳</span>
									</header>
								</section>
								<div>
									<div class="gallery">
										<foreach name="novel" item="vo">
										<a href="/frontendNovelChapter?id={$vo.id}" target="_blank">
											<div class="gallery-item">
												<div class="gallery-item-image tag_jiaobiao" data-tag="{$vo.tags_name}">
													<div data-title="{$vo.title}" class="title_jiaobiao" >
														<div data-msg="{$vo.novel_status_name}" class="jiaobiao" >
															<div data-count="字数：{$vo.all_count}" class="count_jiaobiao" >
																<img width="240px" height="300px" src="{$vo.icon}">
															</div>
														</div>
													</div>
												</div>
												<div class="gallery-item-description">
													<h3 style="margin-top: 10px">&nbsp;&nbsp;&nbsp;《{$vo.title}》<br><p style="float: right;margin-right: 20px">-- {$vo.author}</p></h3>
													<br>
													&nbsp;
													&nbsp;&nbsp;
													<p style="margin-left: 10px;margin-right: 5px">{$vo.brief|html_entity_decode=###}</p>
												</div>
											</div>
										</a>
										</foreach>
									</div>
								</div>
							</div>
					</div>
				
				</div>
			</div>
		</div>
	<!-- /Main -->

	<!-- Copyright -->
	<include file="frontend_page/home/blog/blog_copyright"/>

	</body>
</html>